<template>
	<div class="m-comments">
		<h4 class="cmt_title">精彩评论</h4>
		<div class="cmt_list"  v-for="item in songsheettopLists">
			<div class="cmt_item j-cmt_item_1294471531">
				<div class="cmt_head">
					<a class="userphoto" href="/user/home?nickname=Y-May9214"><img :src="item.user.avatarUrl" alt=""></a>
				</div>
				<div class="cmt_wrap f-bd f-bd-btm">
					<div class="cmt_header">
						<div class="cmt_meta"><span class="cmt_user"><a class="nickname" href="/user/home?nickname=Y-May9214">{{item.user.nickname}}</a></span>
							<div class="cmt_time"><span>1分钟前</span></div>
						</div>
						<div class="cmt_like"><span class="cmt_likearea"><span class="cmt_count"></span><i class="cmt_likeicn"><thumbsvg class="thumb"/></i></span>
						</div>
					</div>
					<div class="cmt_content"><span class="cmt_text">{{item.content}}</span>
						<!-- react-empty: 1054 -->
					</div>
				</div>
			</div>
		</div>
		<h4 class="cmt_title">最新评伦</h4>
		<div class="cmt_list"  v-for="itemm in songsheettopListss">
			<div class="cmt_item j-cmt_item_1294471531">
				<div class="cmt_head">
					<a class="userphoto" href="/user/home?nickname=Y-May9214"><img :src="itemm.user.avatarUrl" alt=""></a>
				</div>
				<div class="cmt_wrap f-bd f-bd-btm">
					<div class="cmt_header">
						<div class="cmt_meta"><span class="cmt_user"><a class="nickname" href="/user/home?nickname=Y-May9214">{{itemm.user.nickname}}</a></span>
							<div class="cmt_time"><span>1分钟前</span></div>
						</div>
						<div class="cmt_like"><span class="cmt_likearea"><span class="cmt_count"></span><i class="cmt_likeicn"><thumbsvg class="thumb"/></i></span>
						</div>
					</div>
					<div class="cmt_content"><span class="cmt_text">{{itemm.content}}</span>
						<!-- react-empty: 1054 -->
					</div>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	import thumbsvg from '@/svg/thumb.svg'
	export default {
		components : {
			thumbsvg
		},
		props : {
			songsheettopLists:null,
			songsheettopListss:null
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.m-comments {
	    word-wrap: break-word;
	    word-break: break-all;
	    .cmt_title {
		    margin: 0;
		    padding: r(8px) r(20px);
		    color: #666;
		    font-size: r(24px);
		    font-weight: 400;
		    background: rgba(0,0,0,.05);
		}
		.cmt_list{
			.cmt_item {
			    padding-top: r(20px);
			    width: 100%;
			    display: -webkit-flex;
			    display: -webkit-box;
			    display: flex;
			    flex-direction: row;
			    .cmt_head {
				    height: r(70px);
				    margin: 0 10px;
				    flex: none;
				    >a {
					    position: relative;
					    display: block;
					    color: #507daf;
    					text-decoration: none;
    					img {
						    display: block;
						    border-radius: 50%;
						    width: r(60px);
						    height: r(60px);
						}
					}
				}
				.cmt_head+.cmt_wrap {
				    padding-left: 0;
				}
				.cmt_wrap {
				    padding-right: 10px;
				    padding-bottom: 11px;
				    padding-left: 10px;
				    -webkit-flex: auto;
				    -webkit-box-flex: 1;
				    flex: auto;
				    width: 0;
				    .cmt_header {
					    display: flex;
					    flex-direction: row;
					    .cmt_meta {
						    flex: auto;
						    width: 0;
						    font-size: 0;
						    .cmt_user {
							    max-width: 100%;
							    display: inline-flex;
							    align-items: center;
							    a {
								    font-size: r(28px);
								    color: #666;
								    line-height: 20px;
								    overflow: hidden;
								    text-overflow: ellipsis;
								    white-space: nowrap;
								    -webkit-box-flex: 1;
								    -webkit-flex: auto;
								    flex: auto;
								}
							}
							.cmt_time {
							    font-size: r(18px);
							    color: #999;
							}
							
						}
						.cmt_like {
							    width: r(130px);
							    height: r(44px);
							    line-height: r(44px);
							    font-size: r(22px);
							    color: #999;
							    flex: none;
							    text-align: right;
							    .cmt_likearea {
								    display: inline-block;
								    min-width: r(60px);
								    padding-left: r(10px);
								    .cmt_count {
									    vertical-align: middle;
									}
									.cmt_likeicn {
									    display: inline-block;
									    width: r(28px);
									    height: r(28px);
									    margin-left: r(12px);
									    line-height: 0;
									    vertical-align: middle;
									    cursor: pointer;
									    .thumb{
									    	width: r(28px);
									    	height: r(28px);
									    }
									}
								}
							}
					}
					.cmt_content {
					    color: #333;
					    font-size: r(30px);
					    line-height: r(44px);
					    margin-top: r(10px);
					    .cmt_text {
						    vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>